<script setup>
import {
	ref,
	computed,
	onActivated
} from 'vue'
import {
	projectDetail,
	deleteJobUser,
	okProject
} from "@/api/project";
import {
	informations,
	addInformation,
	delziliao,
	meetingList,
	delmeeting
} from '@/api/information';

import {
	commissionList, commissionSubmitList
} from '@/api/commission'


import {
	getBusinessList, delBusiness
} from "@/api/business.js"
import {
	paymentList
} from "@/api/supplier.js"

import {
	useRoute
} from "vue-router";
import {
	toast
} from "@/hook/toast";
import router from "@/router";
import { xiangmukehu } from "@/api/business"

import {
	delay
} from "@/utils";
import confirm from "@/libs/confirm";
import AddVue from "./add/index";
import AllotVue from '@/views/business-detail/allot'
import MeetingVue from './meeting/index'
import SettlementVue from './settlement/index'
// 引入组件
import BkgeVue from './bkge/index.vue'
import CtbVue from './ctb/index.vue'



import {
	jiemaData
} from '@/utils'

const projectData = ref({})
// 资料详情
const infomationDataOne = ref({})

// 会议列表
const meetingListData = ref([])

// 客户列表信息
const customList = ref([])


// 添加资料 展示
const addRef = ref(null)
const visible = ref(false)

// 定义方式    
const tabPosition = ref('top')
function editProject(row) {
	addRef.value?.editHandle(row)
}




// 弹出框 某一项宽度
const formLabelWidth = '100px'
const size = ref("default");

// 添加人员展示
const showAllot = ref(false)
const allotRef = ref(null)
// 添加会议展示
const showMeeting = ref(false)
const meetingRef = ref(null)

// 添加结算款项 
const showSettlement = ref(false)
const settlementRef = ref(null)

// 添加佣金
const showBkge = ref(false)
const bkgeRef = ref(null)

// 佣金记录
const showCtb = ref(false)
const ctbRef = ref(null)

// 添加成功之后展示的内容
function addSuccess() {
	resetForm()
}
// 项目款项
const paymentData = ref([])

// 款项结算
const payDataList = ref(null)

// 款项佣金
const commissionDataList = ref([])

const commissionSubmitData = ref([])


function resetForm() {
	initData()
}
// 编辑
function editHandles(row) {
	addRef.value?.editHandle(row)
}
const loading = ref(false)
const personList = computed(() => {
	const {
		user_job_info
	} = projectData.value
	if (!user_job_info || !user_job_info.length) return []
	const roleEnum = {
		'1': '前端',
		'2': '后端',
		'3': 'UI',
	}
	const roleType = {
		'1': '',
		'2': 'success',
		'3': 'warning',
	}
	const statusEnum = {
		0: 'danger',
		1: 'success'
	}
	return user_job_info.map(item => {
		const {
			shenfen,
			is_wancheng
		} = item
		item.role = roleEnum[shenfen] || '未知'
		item.roleType = roleType[shenfen] || ''
		item.tagType = statusEnum[is_wancheng]
		return item
	})
})
//  解码
// const meetingListDatas = computed(() => {
//   const {user_job_info} = projectData.value
//   if (!user_job_info || !user_job_info.length) return []
//   return user_job_info.map(item => {
//     const {shenfen,is_wancheng} = item
//     item.role = roleEnum[shenfen] || '未知'
//     item.roleType = roleType[shenfen] || ''
//     item.tagType = statusEnum[is_wancheng]
//     return item
//   })
// })
const route = useRoute()
async function initData() {
	const {
		query
	} = route
	if (!query.hasOwnProperty('id')) return toast({
		title: '参数错误',
		onClose: () => {
			router.back()
		}
	})
	loading.value = true
	const {
		id
	} = query
	const resp = await projectDetail({
		xiangmu_id: id
	})
	//执行另一个接口
	// const resD = await informations({
	// 	xiangmu_id: id
	// })
	// 执行另一个会议列表
	const resH = await meetingList({
		xiangmu_id: id
	})
	// 执行项目id 
	const resB = await getBusinessList({
		xiangmu_id: id
	})
	// 获取款项详情
	const resX = await paymentList({
		xiangmu_id: id
	})
	// 获取用户信息
	const rexS = await xiangmukehu({
		xiangmu_id: id
	})
	console.log(rexS)
	// 获取结算佣金接口
	const rexL = await commissionList({
		xiangmu_id: id
	})

	// 项目结款列表
	const rexO = await commissionSubmitList({
		xiangmu_id: id
	})

	await delay(300)
	const {
		code,
		data,
		msg
	} = resp
	// const dataInfo = resD.data
	loading.value = false
	if (code !== 1) return toast({
		title: msg,
		onClose: () => {
			router.back()
		}
	})
	if (!data) return
	projectData.value = data;
	// infomationDataOne.value = dataInfo
	meetingListData.value = resH.data
	paymentData.value = resB.data
	payDataList.value = resX.data
	customList.value = rexS.data
	commissionDataList.value = rexL.data
	commissionSubmitData.value = rexO.data
	console.log('commissionDataList', commissionDataList.value)
}
async function deleteHandle(id) {
	const resp = await deleteJobUser({
		ziliao_title: id
	})
	const {
		code,
		msg
	} = resp
	toast({
		title: msg,
		type: code === 1 ? 'success' : 'error'
	})
	if (code !== 1) return
	await initData()
}

function removePerson(row) {
	const {
		name,
		id
	} = row
	confirm({
		title: '删除确认',
		message: `您确定删除 ${name} 吗？`,
		confirmBtnText: '删除',
		cancelBtnText: '取消'
	}).then(() => deleteHandle(id)).catch(() => { })
}

function allotHandle(row) {
	showAllot.value = true
	allotRef.value?.initData(row)
}

// 天机会议 弹出框
function meetingProject(row) {
	showMeeting.value = true
	meetingRef.value?.editHandle(row)
}
async function deleteHandle2(id) {
	const resp = await delBusiness({
		kuanxiang_id: id
	})
	const {
		code,
		msg
	} = resp

	toast({
		title: msg,
		type: code === 1 ? 'success' : 'error'
	})
	if (code !== 1) return
	await initData()
}

function removePerson2(row) {
	const {
		jieduan_name,
		id
	} = row
	confirm({
		title: '删除确认',
		message: `您确定删除 ${jieduan_name} 吗？`,
		confirmBtnText: '删除',
		cancelBtnText: '取消'
	}).then(() => deleteHandle2(id)).catch(() => { })
}

function removeMeeting(row) {
	const {
		id
	} = row
	confirm({
		title: '删除确认',
		message: `您确定删除吗？`,
		confirmBtnText: '删除',
		cancelBtnText: '取消'
	}).then(() => removeMeetingId(id)).catch(() => { })
}
async function removeMeetingId(id) {
	const resp = await delmeeting({
		huiyi_id: id
	})
	const {
		code,
		msg
	} = resp
	toast({
		title: msg,
		type: code === 1 ? 'success' : 'error'
	})
	if (code !== 1) return
	await initData()
}
async function confirmHandle(e) {
	const resp = await okProject(e)
	const {
		code,
		msg
	} = resp
	toast({
		title: msg,
		type: code === 1 ? 'success' : 'error'
	})
	if (code !== 1) return
	await initData()
}
const formData = ref({
	content: '',
	date: '',
	xiangmucanyu_id: '',
})

// 弹出框是否展示
const dialog = ref(false)
const dialogTitle = ref('项目完成')
/** 打开导入弹窗 */
async function openDialog(row) {
	const {
		id
	} = row
	formData.value.xiangmucanyu_id = id
	dialog.value = true;
}

/** 关闭导入弹窗 */
function closeDialog() {
	dialog.value = false;
}

function handleSubmit(row) {
	dialog.value = false;
	confirmProject()
}

// 图片是否展示
const showViewer = ref(false)
// 图片
const contentPic = ref([])

// 查看富文本 图片
function getpreview(e) {
	if (e.target.nodeName === 'IMG' || e.target.nodeName == 'img') { //判断是否图片标签
		const img = e.target.currentSrc //获取点击图片地址
		contentPic.value = [img]
		onPreview()
	}
}
// 查看图片
function onPreview() {
	showViewer.value = true
}
// 关闭图片
function closeViewer() {
	showViewer.value = false;
};


// 图片是否展示
const showViewer2 = ref(false)
// 图片
const contentPic2 = ref([])

// 查看富文本 图片
function getpreview2(e) {
	if (e.target.nodeName === 'IMG' || e.target.nodeName == 'img') { //判断是否图片标签
		const img = e.target.currentSrc //获取点击图片地址
		contentPic.value = [img]
		onPreview()
	}
}
// 查看图片
function onPreview2() {
	showViewer.value = true
}
// 关闭图片
function closeViewer2() {
	showViewer.value = false;
};


// 下载文件
function handleDownload(row) {
	window.location.href = (row)
	// showViewer.value = false;
	// downloadWord(row.id)
	// .then(res => {
	//   window.location.href = (res.data.url)
	// })
	// .catch(() => {
	// })
}
// 
const paymentNumber = ref(1)
function payment(e) {
	paymentNumber.value = e
	// 查看数据展示
}




// 编辑确认完成
async function confirmProject() {
	const {
		content,
		date,
		xiangmucanyu_id
	} = formData.value
	const payload = {
		content,
		date,
		xiangmucanyu_id
	}
	confirm({
		title: '确认提示',
		message: `您确定设置为已完成状态吗？`,
		confirmBtnText: '完成',
		cancelBtnText: '取消'
	}).then(() => confirmHandle(payload)).catch(() => { })
}


// 添加结算信息
async function addSttlement(row, e) {
	showSettlement.value = true
	settlementRef.value?.editHandle(row, e)
}
// 编辑结算信息
async function editSettlement(row) {
	showSettlement.value = true
	settlementRef.value?.editHandle(row)
}

// 录入佣金
async function addProject(row) {
	console.log(row, '信息')
	showBkge.value = true
	bkgeRef.value?.editHandle(row)
}

// 录入佣金结款记录
async function ctbAdd(row) {
	console.log('row', '佣金结算记录')
	showCtb.value = true
	ctbRef.value?.editHandle(row)
}


function linkTo() {
	router.push({
		name: 'upload',
	})
}
onActivated(initData)
</script>

<template>
	<div class="detail-container card_wrap scroll_wrap" v-loading="loading">
		<el-descriptions title="项目信息" border>
			<template #extra>
				<el-button type="primary" @click="initData">刷新数据</el-button>
			</template>
			<el-descriptions-item>
				<template #label>
					<span>项目名称</span>
				</template>
				<span>{{ projectData.name }}</span>
			</el-descriptions-item>
			<el-descriptions-item>
				<template #label>
					<span>业务公司</span>
				</template>
				<span>{{ projectData.yewu_company_name }}</span>
			</el-descriptions-item>
			<el-descriptions-item>
				<template #label>
					<span>签单日期</span>
				</template>
				<span>{{ projectData.qiandan_date }}</span>
			</el-descriptions-item>
			<el-descriptions-item>
				<template #label>
					<span>合同到期日期</span>
				</template>
				<span>{{ projectData.daoqi_date }}</span>
			</el-descriptions-item>
			<el-descriptions-item>
				<template #label>
					<span>技术备注</span>
				</template>
				<span>{{ projectData.jishu_yaoqiu_content || '无' }}</span>
			</el-descriptions-item>
			<el-descriptions-item>
				<template #label>
					<span>备注</span>
				</template>
				<span>{{ projectData.content || '无' }}</span>
			</el-descriptions-item>

			<el-descriptions-item>
				<template #label>
					<span>业务员</span>
				</template>
				<span>{{ projectData.yewu_name }}</span>
			</el-descriptions-item>
			<el-descriptions-item>
				<template #label>
					<span>产品</span>
				</template>
				<span>{{ projectData.chanpin_name }}</span>
			</el-descriptions-item>
		</el-descriptions>
		<!-- 切换类目 -->
		<!-- <div class="person-list">
			<el-button  :type="paymentNumber==1?'primary':''"   @click="payment(1)" >项目款项</el-button>
			<el-button :type="paymentNumber==2?'primary':''"  @click="payment(2)" >款项结算</el-button>
			<el-button :type="paymentNumber==3?'primary':''"  @click="payment(3)" >项目佣金</el-button>
		</div> -->
		<!-- 客户信息 -->
		<div>
			<div class="person-list">
				<div class="person-header">
					<span>客户信息</span>
					<!-- <div class="header-left"><el-button type="success" plain size="small"
								@click="allotHandle(projectData.id)">分配人员</el-button></div> -->
				</div>
				<el-table :data="[customList]" border style="width: 960px">
					<el-table-column label="姓名" prop="name"></el-table-column>
					<el-table-column label="公司名称" prop="qiye_name"></el-table-column>
					<el-table-column label="联系方式" prop="mobile"></el-table-column>
					<el-table-column label="类型" prop="type_text"></el-table-column>
					<el-table-column label="所在地" prop="address"></el-table-column>
					<el-table-column label="城市" prop="city_name"></el-table-column>
					<el-table-column label="微信号" prop="wx"></el-table-column>
					<el-table-column label="备注" prop="content"></el-table-column>
				</el-table>
			</div>
		</div>
		<el-tabs :tab-position="tabPosition" style="height: 200px;margin-top: 24px;" class="demo-tabs">
			<el-tab-pane label="资料信息">
			</el-tab-pane>
			<el-tab-pane label="项目款项">
				<div class="person-list" v-for="(item, index) in paymentData" :key="index">
					<div class="person-header">
						<span>{{ item.type || '用户数据' }}</span>
						<div class="header-left"><el-button size="small" plain type="primary"
								@click="editProject(projectData.id)">添加款项</el-button></div>
					</div>
					<div>
						<el-button size="large">总价：{{ item.total_price || '0.00' }} 元</el-button> <el-button
							size="large">已结算{{ item.yijiesuan_price || '0.00' }} 元 </el-button> <el-button
							size="large">未结算：{{ item.weijiesuan_price || '0.00' }} 元</el-button>
					</div>
					<div style="margin-top:24px" v-if="item.list.length > 0">
						<el-table :data="item.list" border style="width: 1200px">
							<el-table-column label="项目阶段" prop="jieduan_name" width="120"></el-table-column>
							<!-- <el-table-column label="合同占比" prop="" width="120"></el-table-column> -->
							<el-table-column label="金额(元)" prop="kuanxiang_price" width="120"></el-table-column>
							<el-table-column label="结算状态" prop="status_name" width="120"></el-table-column>
							<el-table-column label="未结算费用(元)" prop="weijiesuan_price" width="120"></el-table-column>
							<el-table-column label="最晚结款日" prop="end_date" width="120"></el-table-column>
							<el-table-column label="备注" width="120" prop="content">
								<template #default="{ row }">
									<div class="content-img" v-html="jiemaData(row.content)" @click="getpreview2($event)">
									</div>
									<el-image-viewer v-if="showViewer2" :url-list="contentPic2" @close="closeViewer2"
										:z-index="9999" />
								</template>
							</el-table-column>
							<el-table-column label="操作" width="240">
								<template #default="{ row }">
									<el-space>
										<el-button type="primary" plain size="small"
											@click="addSttlement(projectData.id, row.id)">添加款项结算</el-button>
										<el-button type="primary" plain size="small"
											@click="editHandles(row)">编辑</el-button>
										<el-button type="danger" plain size="small"
											@click="removePerson2(row)">删除</el-button>

									</el-space>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
			</el-tab-pane>
			<el-tab-pane label="款项结算">
				<!-- <div class="person-header">
					<div class="header-left"><el-button size="small" plain type="primary"
							@click="addSttlement(projectData.id)">添加结算信息</el-button></div>
				</div> -->
				<div style="margin-top:12px">
					<el-table :data="payDataList" border style="width: 980px">
						<el-table-column label="款项阶段" prop="jieduan_name" width="120"></el-table-column>
						<el-table-column label="结款金额" prop="price" width="120"></el-table-column>
						<el-table-column label="完工日期" prop="date" width="120"></el-table-column>
						<el-table-column label="截图" prop="images">
							<template #default="{ row }">
								<div v-if="row.images">
									<el-image :preview-teleported='true' :src="row.images"
										:preview-src-list="[row.images]" />
								</div>
							</template>
						</el-table-column>
						<el-table-column label="备注" prop="content" width="120"></el-table-column>
						<el-table-column label="对公账户" prop="jiekuanzhanghu_name" width="120"></el-table-column>
						<el-table-column label="操作" width="140">
							<template #default="{ row }">
								<el-space>
									<el-button type="primary" plain size="small" @click="editSettlement(row)">编辑</el-button>
									<!-- <el-button type="danger" plain size="small" @click="removePerson2(row)">删除</el-button> -->
								</el-space>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</el-tab-pane>

			<el-tab-pane label="项目佣金">
				<div class="person-list">
					<div class="person-header">
						<span>供应商</span>
						<div class="header-left"><el-button size="small" plain type="primary"
								@click="addProject(projectData.id)">录入项目佣金</el-button></div>
						<!-- <div class="header-left"><el-button size="small" plain type="primary"
								@click="editProject(projectData.id)">供应商管理</el-button></div> -->
					</div>
					<div style="margin-top:12px">
						<el-table :data="commissionDataList" border style="width: 980px">
							<el-table-column label="供应商" prop="gongyingshang_name" width="120"></el-table-column>
							<el-table-column label="款项名称" prop="status_text" width="120"></el-table-column>
							<el-table-column label="应结算" prop="kuanxiang_price" width="120"></el-table-column>
							<el-table-column label="备注" prop="" width="120">
								<template #default="{ row }">
									<div class="content-img" v-html="jiemaData(row.content)">
									</div>
								</template>
							</el-table-column>
							<el-table-column label="操作">
								<template #default="{ row }">
									<el-space>

										<el-button type="primary" plain size="small">编辑</el-button>
										<!-- <el-button type="danger" plain size="small" @click="removePerson2(row)">删除</el-button> -->
									</el-space>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
				<!-- 项目结款信息 -->
				<div class="person-list">
					<div class="person-header">
						<span>结款记录</span>
						<div class="header-left"><el-button size="small" plain type="primary"
								@click="ctbAdd(projectData.id)">录入结款记录</el-button></div>
					</div>
					<div style="margin-top:12px">
						<el-table :data="commissionSubmitData" border style="width: 980px">
							<el-table-column label="供应商" prop="gongyingshang_name" width="120"></el-table-column>
							<el-table-column label="出款账户" prop="jiekuanzhanghu_name" width="120"></el-table-column>
							<el-table-column label="结款日期" prop="date" width="120"></el-table-column>
							<el-table-column label="结款金额" prop="price" width="120"></el-table-column>
							<el-table-column label="备注" prop="">
								<template #default="{ row }">
									<div class="content-img" v-html="jiemaData(row.content)">
									</div>
								</template>
							</el-table-column>
							<el-table-column label="操作" width="140">
								<template #default="{ row }">
									<el-space>
										<!-- <el-button type="primary" plain size="small" @click="ctbAdd(row)">项目款结算</el-button> -->
										<el-button type="primary" plain size="small">编辑</el-button>
										<!-- <el-button type="danger" plain size="small" @click="removePerson2(row)">删除</el-button> -->
									</el-space>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
				<!-- <div class="person-list" v-for="(item, index) in paymentData" :key="index">
					<div class="person-header">
						<span>{{ item.type || '用户数据' }}</span>
						<div class="header-left"><el-button size="small" plain type="primary"
								@click="editProject(projectData.id)">录入项目佣金</el-button></div>
						<div class="header-left"><el-button size="small" plain type="primary"
								@click="editProject(projectData.id)">供应商管理</el-button></div>
					</div>
					<div>
						<el-button size="large">应结算：{{ item.total_price || '0.00' }} 元</el-button> <el-button
							size="large">已结算{{ item.yijiesuan_price || '0.00' }} 元 </el-button> <el-button
							size="large">未结算：{{ item.weijiesuan_price || '0.00' }} 元</el-button>
					</div>
					<div style="margin-top:24px" v-if="item.list.length > 0">
						<el-table :data="item.list" border style="width: 900px">
							<el-table-column label="供应商" prop="jieduan_name" width="120"></el-table-column>
							<el-table-column label="应结算" prop="kuanxiang_price" width="120"></el-table-column>
							<el-table-column label="未结算" prop="status_name" width="120"></el-table-column>
							<el-table-column label="出款账户" prop="weijiesuan_price" width="120"></el-table-column>
							<el-table-column label="操作">
								<template #default="{ row }">
									<el-space>
										<el-button type="primary" plain size="small"
											@click="editHandles(row)">编辑</el-button>
										<el-button type="danger" plain size="small"
											@click="removePerson2(row)">删除</el-button>
									</el-space>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div> -->

			</el-tab-pane>
		</el-tabs>


		<!-- 表单弹出框 -->
		<el-dialog v-model="dialog" :title="dialogTitle" width="600px" align-center @close="closeDialog">
			<el-form ref="userFormRef" :model="formData" label-width="40px">
				<el-form-item label="完成日期" :label-width="formLabelWidth">
					<el-date-picker v-model="formData.date" type="date" placeholder="请选择日期" :size="size" />
				</el-form-item>
				<el-form-item label="备注" :label-width="formLabelWidth">
					<el-input v-model="formData.content" placeholder="请输入备注" show-word-limit rows="4" type="textarea"
						autocomplete="off" />
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="primary" @click="handleSubmit">确 定</el-button>
					<el-button @click="closeDialog">取 消</el-button>
				</div>
			</template>
		</el-dialog>
		<div class="absolute">
			<add-vue ref="addRef" v-model="visible" @add-success="addSuccess" />
			<allot-vue ref="allotRef" v-model="showAllot" @add-success="addSuccess" />
			<meeting-vue ref="meetingRef" v-model="showMeeting" @add-success="addSuccess"></meeting-vue>
			<settlement-vue ref="settlementRef" v-model="showSettlement" @add-success="addSuccess"> </settlement-vue>
			<!-- 添加佣金 -->
			<bkge-vue ref="bkgeRef" v-model="showBkge" @add-success="addSuccess"></bkge-vue>
			<!-- 佣金结款记录 -->
			<ctb-vue ref="ctbRef" v-model="showCtb" @add-success="addSuccess"> </ctb-vue>

		</div>
	</div>
</template>

<style scoped lang="scss">
.el-table {

	& ::v-deep th.el-table__cell,
	::v-deep td.el-table__cell {
		// 设置position 使得 子元素不与其产生新的层叠关系
		position: static;
	}
}


.detail-container {
	overflow-y: scroll;

	.service-wrap {
		width: 500px;
	}

	.person-list {
		margin-top: 24px;

		.person-header {
			color: var(--el-text-color-primary);
			font-size: 16px;
			font-weight: bold;
			padding-bottom: 16px;
			display: flex;
			align-items: center;

			.header-left {
				margin-left: 24px;
			}

		}
	}

	.segmentation {
		display: flex;
		justify-content: space-between;

		.person-list {
			margin-top: 24px;

			.person-header {
				color: var(--el-text-color-primary);
				font-size: 16px;
				font-weight: bold;
				padding-bottom: 16px;
				display: flex;
				align-items: center;

				.header-left {
					margin-left: 24px;
				}
			}
		}
	}


	.margin-top {
		margin-top: 24px;
	}

	.header-title {
		color: #3c4353;
		font-weight: bold;
		font-size: 18px;
	}
}
</style>